﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/layuimini/css/public.css" rel="stylesheet" />
    <style>


    </style>
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>电源事业部年报</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="" lay-filter="example">
                        <div class="layui-form-item">
                           <div class="layui-inline">
                                <label class="layui-form-label">年份</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" lay-verify="required|number" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                </div>
            </script>
            <table class="layui-hide" id="table" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
            </script>
        </div>
    </div>
    <script src="~/layui/layui.js"></script>
    <script src="~/layuimini/js/lay-config.js"></script>
    <script>
        layui.config({
            base: '/layui/extend/'
        }).extend({
            soulTable: 'soulTable'
        }).use(['form', 'table', 'laydate', 'soulTable'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laydate = layui.laydate,
                soulTable = layui.soulTable;

        table.render({
            elem: '#table',
            method: 'post',
            url: '@Url.Action("ReportYearAsync", "Bill5")',
            request: {
                pageName: 'PageIndex' //页码的参数名称，默认：page
               , limitName: 'PageSize' //每页数据量的参数名，默认：limit
            },
            where: {
                Year: $('#name').val(),
            },
            cellMinWidth:120,
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', { layEvent: 'export', icon: 'layui-icon-export', title: '刷新' }, 'print'],
            cols: [[
                { type: 'numbers', title: '序号', width: 50, rowspan: 2 },
                { field: 'ID', title: 'ID', width: 100, hide: true, rowspan: 2 },
                { field: 'Year', title: '年份', rowspan: 2 },
                { field: 'Code', title: '流程卡号', rowspan: 2 },
                { field: 'CreateDate', title: '投产日期', rowspan: 2 },
                { field: 'GoodsNumber', title: '产品编号', rowspan: 2 },
                { field: 'GoodsModel', title: '产品型号', rowspan: 2 },
                { field: 'Number', title: '产品批次号', rowspan: 2 },
                { field: 'Qty', title: '投产数量', rowspan: 2 },
                { field: 'DengJi', title: '质量等级', rowspan: 2 },
                { field: 'WaiXing', title: '封装外型', rowspan: 2 },
                { field: 'JiaoDate', title: '交付日期', rowspan: 2 },
                { field: '', title: '1月', colspan: 4 },
                { field: '', title: '2月', colspan: 4 },
                { field: '', title: '3月', colspan: 4 },
                { field: '', title: '4月', colspan: 4 },
                { field: '', title: '5月', colspan: 4 },
                { field: '', title: '6月', colspan: 4 },
                { field: '', title: '7月', colspan: 4 },
                { field: '', title: '8月', colspan: 4 },
                { field: '', title: '9月', colspan: 4 },
                { field: '', title: '10月', colspan: 4 },
                { field: '', title: '11月', colspan: 4 },
                { field: '', title: '12月', colspan: 4 },
                { field: 'TotalTaskTime', title: '合计工时', rowspan: 2 },
            ], [
                { field: 'BeginPro1', title: '月初所处工序' },
                { field: 'EndPro1', title: '月末所处工序' },
                { field: 'TaskTime1', title: '本月工时' },
                { field: 'IsOver1', title: '是否完工' },

                { field: 'BeginPro2', title: '月初所处工序' },
                { field: 'EndPro2', title: '月末所处工序' },
                { field: 'TaskTime2', title: '本月工时' },
                { field: 'IsOver2', title: '是否完工' },

                { field: 'BeginPro3', title: '月初所处工序' },
                { field: 'EndPro3', title: '月末所处工序' },
                { field: 'TaskTime3', title: '本月工时' },
                { field: 'IsOver3', title: '是否完工' },

                { field: 'BeginPro4', title: '月初所处工序' },
                { field: 'EndPro4', title: '月末所处工序' },
                { field: 'TaskTime4', title: '本月工时' },
                { field: 'IsOver4', title: '是否完工' },

                { field: 'BeginPro5', title: '月初所处工序' },
                { field: 'EndPro5', title: '月末所处工序' },
                { field: 'TaskTime5', title: '本月工时' },
                { field: 'IsOver5', title: '是否完工' },

                { field: 'BeginPro6', title: '月初所处工序' },
                { field: 'EndPro6', title: '月末所处工序' },
                { field: 'TaskTime6', title: '本月工时' },
                { field: 'IsOver6', title: '是否完工' },

                { field: 'BeginPro7', title: '月初所处工序' },
                { field: 'EndPro7', title: '月末所处工序' },
                { field: 'TaskTime7', title: '本月工时' },
                { field: 'IsOver7', title: '是否完工' },

                { field: 'BeginPro8', title: '月初所处工序' },
                { field: 'EndPro8', title: '月末所处工序' },
                { field: 'TaskTime8', title: '本月工时' },
                { field: 'IsOver8', title: '是否完工' },

                { field: 'BeginPro9', title: '月初所处工序' },
                { field: 'EndPro9', title: '月末所处工序' },
                { field: 'TaskTime9', title: '本月工时' },
                { field: 'IsOver9', title: '是否完工' },

                { field: 'BeginPro10', title: '月初所处工序' },
                { field: 'EndPro10', title: '月末所处工序' },
                { field: 'TaskTime10', title: '本月工时' },
                { field: 'IsOver10', title: '是否完工' },

                { field: 'BeginPro11', title: '月初所处工序' },
                { field: 'EndPro11', title: '月末所处工序' },
                { field: 'TaskTime11', title: '本月工时' },
                { field: 'IsOver11', title: '是否完工' },

                { field: 'BeginPro12', title: '月初所处工序' },
                { field: 'EndPro12', title: '月末所处工序' },
                { field: 'TaskTime12', title: '本月工时' },
                { field: 'IsOver12', title: '是否完工' },

            ]],
            limits: [10, 20, 30, 50, 100, 100000000],
            limit: 20,
            page: true,
            //skin: 'line',
            //totalRow: true,
            height: 'full-170',
            size:'sm',
            excel: { filename: '复杂表头导出.xlsx' }
            , done: function () {
                soulTable.render(this)
            }
        });
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'export') {  // 监听删除操作
                    soulTable.export('table', {
                        filename: '电源事业部年报.xlsx'
                    });
                }
            });        // 监听搜索操作

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            RefreshTable();
            return false
        });

        function RefreshTable() {
            table.reload('table', {
                where: {
                    Year: $('#name').val(),
                }
            }, 'data');

        }

    });
    </script>
</body>
</html>